<template>
    <div>
        <button @click="sendGet">发送get请求</button>
        <button @click="sendPost">发送post请求</button>
        <button @click="sendDelete">发送delete请求</button>
        <button @click="sendPut">发送put请求</button>
        <button @click="sendSimple">使用async、await简化Promise用法</button>
        <button @click="sendInterceptor">axios拦截器</button>
        <button @click="sendProxy">配置代理发送跨域请求</button>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data(){
        return {
            users: []
        }
    },
    methods: {
        sendGet(){
            /**
             * 查询所有用户
             */
            // axios.get('http://ums.tangxiaoyang.vip/api/users/list')
            //     .then(res => {
            //         // console.log(res.data)
            //         if(res.data.status === 200){
            //             let users = res.data.data
            //             console.log(users)
            //         }else{
            //             console.log(res.data.msg)
            //         }
            //     })
            //     .catch(err => {
            //         console.log(err)
            //     })

            /**
             * 根据id查询用户
             */
            // 通过url传参
            axios.get('http://ums.tangxiaoyang.vip/api/users/findById?id=6242')
                .then(res => {
                    console.log(res)
                })

            // 通过params传参
            // axios.get('http://ums.tangxiaoyang.vip/api/users/findById', {
            //     params: {
            //         id: 6242
            //     }
            // })
            //     .then(res => {
            //         console.log(res.data)
            //     })

            // rest风格传参
            // axios.get('http://ums.tangxiaoyang.vip/api/users/query/6242')
            //     .then(res => {
            //         console.log(res.data)
            //     })
        },
        sendPost(){
            axios.delete('/api/param/test1')
                .then(res => {
                    console.log(res.data)
                })
        },
        sendDelete(){
            // 根据id删除
            // axios.delete('http://ums.tangxiaoyang.vip/api/users/remove/6242')
            //     .then(res => {
            //         console.log(res.data)
            //     })
            
            // 批量删除
            let ids = [6242, 6243, 6244]
            axios.delete('/api/param/test6', {
                data: ids
            })
                .then(res => {
                    console.log(res.data)
                })
        },
        sendPut(){
            this.$http.put('/users/modify', {
                id: 6245,
                name: 'lucy',
                phone: '12345678901',
                address: '南京'
            })
                .then(res => {
                    if (res.data.status === 200) {
                        alert('修改成功')
                    }else{
                        alert('修改失败:' + res.data.msg)
                    }
                })
        },
        async sendSimple(){
            // 异步请求 
            /*this.$http.get('/users/list').then(res => {
                this.users = res.data.data
                // console.log(this.users)
            })*/

            // 使用async、await将异步请求 转换为 同步请求
            const {data: res} = await this.$http.get('/users/list')
            this.users = res.data

            console.log(111)
            console.log(this.users)
        },
        async sendInterceptor(){
            const res = await this.request.get('/users/list')
            console.log(res)
        },
        async sendProxy(){
            const res = await this.request.get('/simpleWeather/query', {
                params: {
                    city: '南京',
                    key: '3b152d4c5b0b5ae07dce187e2ce9a04a'
                }
            })
            console.log(res)
        }
    }
}
</script>

<style lang="less" scoped>
    
</style>